<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Untitled Document</title>

		<style type="text/css">


		</style>
		<script src="./js/dojo/dojo.js"></script>
		<script type="text/javascript">
			
		dojo.ready(function(){
			
			
			/**
			 * connect usage
			 * 
			 * 1, dojo.query();
			 * 
			 * param1, evt name(string), 
			 * param2, if context , this will be refer to it in evt handle
			 * 
			 * 			if handle, this will be the entry that get from query
			 * @param {Object} evt
			 */
			/*
			var btn = dojo.query('#formId input[type="button"]').connect('onclick', function(evt){
				console.log(this);
				console.log(evt);
				console.log('evt bind by query chain');
			})	 ;*/
			
			
			//console.log( btn );
			var btn = dojo.query('#formId input[type="button"]')[0];
			console.log(btn);
			dojo.connect(btn,'onclick',function(evt){
				console.log(evt);
				console.log(this);
				console.log('evt bind by query array index');
				
				
				/*
				 * formToJson , return a json string
				 * formToObject, return a standard js object
				 * formToQuery return a url query such as string xx=xx&xx=xxx
				 * queryToObject return a query string to a object
				 * 
				 */
				console.log( dojo.formToJson('formId'));
				console.log( dojo.formToObject('formId'));
				console.log( dojo.formToQuery('formId'));
				
				var queryString = dojo.formToQuery('formId');
				console.log(dojo.queryToObject( queryString));
				//console.log( dojo.formToObject('formId'));
			});
			
			var text = dojo.query('#formId input[type="text"]');
			
			console.log(text);
			dojo.forEach( text , function(entry){
				console.log(entry);
				dojo.connect(entry, 'onfocus', function (evt){
					console.log(this);
					console.log(evt);
					console.log('evt bind by foreach ');
				});				
			})
			

		});	


		</script>
	</head>
	<body>
		<div id="formDivContainer">
			
			<form id="formId">
				<input type="text" name="fieldI" />
				<input type="text" name="fieldII" />
				<input type="text" name="fieldIII" />
			
				<input type="button" name="btn" value="clickMe" />
			</form>
			
		</div>
	</body>
</html>
